<script setup>
import { ref, reactive, onBeforeMount,onMounted,onBeforeUpdate ,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
const state = reactive({
  isActive: true,
  hasError: true
})
//可以以对象行使写class
const classObj = reactive({
  'active': state.isActive,
  'text-dender': state.hasError
})
const otherpag = ref('otherpag');
const styleObj = ref({
  color: 'red',
  'background-color': 'pink'
})

//v-for练习
const forList = ref([
  { id: 1, name: 'lili', age: 12 },
  { id: 3, name: 'jiji', age: 9 },
  { id: 4, name: 'qq', age: 12 },
  { id: 5, name: 'xx', age: 12 },
])
const forObj = ref({
  index: '序号',
  name:'姓名',
  age: '年龄',
})

onBeforeMount(()=>{console.log('dom挂在之前');})
onMounted(()=>{console.log('dom挂载完成');})
onBeforeUpdate(()=>{console.log('数据更新之前调用');})
onUpdated(()=>{console.log('数据更新之后');})
onBeforeUnmount(()=>{console.log('组件销毁前');})
onUnmounted(()=>{console.log('组建销毁完成');})
</script>
  
  <template>
  <div class="classdemo">
    <div :class="{ 'active': state.isActive, 'text-dender': state.hasError }">测试class</div>
    <div :class="[classObj, otherpag]">测试class</div>
    <div :style="{ 'font-size': '20px' }">测试内联样式</div>
    <div :style="styleObj">测试内联样式obj格式</div>
    <div :style="[styleObj, { 'font-size': '20px' }]">测试内联样式obj[]格式</div>

    <br />
    <table border>
      <tr>
        <td v-for="(value, key) in forObj">{{ value }}</td>
      </tr>
      <tr v-for="({ name, age }, index) in forList">
        <td>{{  index + 1  }}</td>
        <td>{{  name  }}</td>
        <td>{{  age  }}</td>
      </tr>
    </table>
  </div>
</template>
  
  <style scoped>
  .active {
    color: pink
  }
  
  .text-dender {
    width: 400px;
  }
  
  .otherpag {
    background-color: black;
  }
  </style>
  